<template>
  <div>
      <table>
          <tr>
              <td>id</td>
              <td>用户名</td>
              <td>手机号</td>
              <td>修 改</td>
              <td>删 除</td>
          </tr>
          <tr v-for='i in list' :key='i.id'>
              <td>{{i.id}}</td>
              <td>{{i.username}}</td>
              <td>{{i.password}}</td>
              <td>{{i.phone}}</td>
              <td><button @click="putuser(i.id)">修改</button></td>
              <td><button @click="deleteuser(i.id)">删除</button></td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
        list:[]  
    };
  },
  methods: {
      getuser(){
          this.$axios.get('selectuser/').then(res=>{
              this.list = res.data
              console.log(res.data);
          })
      },
      deleteuser(id){
          this.$axios.delete('selectuser/?id='+id).then(res=>{
              console.log(res.data.msg)
              this.getuser()
          })
      },
      putuser(id){
          this.$router.push({
              name:'putuser',
              query:{
                  'id':id
              }
          })
      }
  },
  mounted(){
      this.getuser()
  },
}

</script>
<style>
     table{
         margin: 0 auto;
     }
</style>